<template>
  <div>
    <div class="my">
      <div class="top">
        <div class="top-inner">
          <div class="msg-qrcode">
            <i
              class="qrcode"
              @click="$router.push('/my/miniprogram-code')"
              v-if="userInfo && parseInt(userInfo.identity_type)"
            ></i>
            <i class="msg" @click="$router.push({path: '/my/message'})">
              <b class="dot" v-if="userInfo && userInfo.unread_num > 0"></b>
            </i>
          </div>
          <div class="info">
            <div class="avater" @click="$router.push({path:'/my/edit'})">
              <img
                :src="userInfo ?  userInfo.portrait_url : require('@/assets/images/haha.png')"
                alt
              />
            </div>
            <div class="txt" v-if="userInfo">
              <p class="name">{{userInfo && userInfo.nickname}}</p>
              <p
                class="time"
                v-if="userInfo && userInfo.identity_type"
              >会员有效期：{{userInfo.start_at.split(' ')[0].replace(/-/g, '. ')}}~{{ userInfo.expire_at.split(' ')[0].replace(/-/g, '. ')}}</p>
            </div>
            <div v-else class="login-txt" @click="$router.push('/login')">点我登录</div>
          </div>
          <div class="opt" v-if="userInfo && parseInt(userInfo.identity_type)">
            <div class="integral" @click="$router.push({path: '/my/integral'})">
              <i></i>
              <span>我的积分</span>
            </div>
            <div class="coupon" @click="$router.push({path: '/my/coupon'})">
              <i></i>
              <span>优惠券</span>
            </div>
            <div class="conversion" @click="$router.push({path: '/my/exchange-center'})">
              <i></i>
              <span>兑换中心</span>
            </div>
          </div>
        </div>
      </div>
      <div class="designer-conversion" @click="$router.push('/my/poster')">
        <img src="@/assets/images/pic_hyqy.png" alt />
      </div>
      <div class="bottom">
        <div
          class="item-park"
          @click="$router.push('my/park')"
          v-if="userInfo && parseInt(userInfo.identity_type)"
        >
          <span>免费停车</span>
          <span class="my-tip park" v-if="showCommonTip">输入车牌号，即可免费停车哦～</span>
        </div>
        <div class="inner">
          <div
            class="item-nor"
            @click="$router.push('/my/reservation')"
            v-if="userInfo ? !parseInt(userInfo.identity_type) : true"
          >
            <span>我的预约</span>
            <i></i>
          </div>
          <div
            class="item-nor"
            @click="$router.push({path: '/my/coupon'})"
            v-if="userInfo ? !parseInt(userInfo.identity_type) : true "
          >
            <span>我的优惠券</span>
            <i></i>
          </div>
          <div
            class="item-nor"
            @click="$router.push('/my/my-homepage')"
            v-if="userInfo && parseInt(userInfo.identity_type)"
          >
            <span>我的主页</span>
            <i></i>
            <span class="my-tip home" v-if="showCommonTip">编辑个人专属主页，可获得免费形象宣传哦～</span>
          </div>

          <div
            class="item-nor"
            @click="$router.push({path: '/my/activity'})"
            v-if="userInfo && parseInt(userInfo.identity_type)"
          >
            <span>我的活动</span>
            <i></i>
          </div>
          <div
            class="item-nor"
            @click="$router.push({path: '/my/task'})"
            v-if="userInfo && parseInt(userInfo.identity_type)"
          >
            <span>我的任务</span>
            <i></i>
          </div>
          <div
            class="item-nor"
            @click="$router.push({path: '/my/my-custom'})"
            v-if="userInfo && parseInt(userInfo.identity_type)"
          >
            <span>我的客户</span>
            <i></i>
          </div>
          <div
            class="item-nor"
            @click="$router.push({path: '/my/counsel'})"
            v-if="userInfo && parseInt(userInfo.identity_type)"
          >
            <span>咨询客户</span>
            <i></i>
          </div>
          <div class="item-nor" @click="show = true">
            <span>联系客服</span>
            <i></i>
          </div>
          <div class="item-nor" @click="loginOut" v-if="userInfo">
            <span>退出登录</span>
          </div>
        </div>
      </div>
      <div class="advertising" v-if="showAd" @click="attentionOfficialAccount">
        <span @click.stop="showAdClick">
          <i class="close"></i>
        </span>

        <img src="@/assets/images/ljgz.png" alt />
      </div>
      <Tip ref="tip" class="tip" :showClose="false" :overlayHide="false">
        <div class="txt">
          <p>您的会员身份已到期</p>
          <p>请立即续费，即可继续使用哦～</p>
        </div>
        <div class="btn">
          <my-button name="立即续费" @btnClick="handleBtnClick" />
        </div>
      </Tip>
      <van-popup v-model="show" closeable position="bottom">
        <div class="popup-inner">
          <div class="ttile">联系客服</div>
          <div class="copy">
            <p>
              客服微信：
              <span>{{wxNo}}</span>
            </p>
            <span
              v-clipboard:copy="wxNo"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >点击复制</span>
          </div>
          <div class="tel">
            <p>
              客服电话：
              <span>13918958807</span>
            </p>
            <span>
              <a :href="'tel:'+ tel">点击拨号</a>
            </span>
          </div>
          <div class="official-account">
            <p>
              公众号：
              <span>1500215111</span>
            </p>
            <span @click="offocialAccount">点击查看</span>
          </div>
          <my-button name="取消" class="cancel" @btnClick="show = false" />
        </div>
      </van-popup>
      <transition name="slide">
        <router-view @success="handleSuccess"></router-view>
      </transition>
    </div>
    <div>
      <!-- <van-overlay :show="showOfficial" @click="showOfficial = false" class="officialOverlay"> -->
      <div @click.stop>
        <div>
          <Tip ref="official" title="关注公众号" class="officialOverlay">
            <div class="code" ref="QrCode" id="qrcover"></div>
            <p>
              扫描上方二维码，或者微信搜索DDSC设计师俱乐部
              公众号关注获取更多信息。
            </p>
            <my-button name="保 存 图 片" @btnClick="hanndleSaveQrcode" />
          </Tip>
        </div>
      </div>
      <!-- </van-overlay> -->
    </div>
    <van-overlay :show="showSaveImg" @click="showSaveImg = false" class="showSaveImg">
      <div class="wrapper" @click.stop>
        <div class="block">
          <img :src="imgUrl" alt />
          <div class="tip">长按保存图片</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import Tip from '@/components/tip/tip'
import { getToken, removeToken } from '@/util/auth'
import { getUserInfo, getCodeText } from '@/api/my'
import QRCode from 'qrcodejs2'
import MyButton from '@/components/button/button'
import html2canvas from 'html2canvas'
const ERR_OK = 200
export default {
  name: 'My',
  components: {
    Tip,
    MyButton
  },
  data () {
    return {
      imgUrl: '',
      showSaveImg: false,
      showOfficial: false,
      show: false,
      wxNo: '1500215111',
      tel: '13918958807',
      showAd: localStorage.getItem('showAd')
        ? JSON.parse(localStorage.getItem('showAd'))
        : true,
      textUrl: '',
      userInfo: null,
      showCommonTip: true
    }
  },
  created () {
    if (localStorage.getItem('showCommonTip')) {
      this.showCommonTip = JSON.parse(localStorage.getItem('showCommonTip'))
    }
    if (this.showCommonTip) {
      const timer1 = setTimeout(() => {
        localStorage.setItem('showCommonTip', false)
        this.showCommonTip = false
        clearTimeout(timer1)
      }, 5000)
    }
    if (localStorage.getItem('USER')) {
      this.userInfo = JSON.parse(localStorage.getItem('USER'))
    }

    // this._getUserInfo().then(() => {
    //   this.userInfo = JSON.parse(localStorage.getItem('USER'))
    // })
  },
  mounted () {
    this.$nextTick(() => {
      this._getCodeText().then(() => {
        this.initQrcode()
      })
    })
  },
  methods: {
    attentionOfficialAccount () {
      this.showOfficial = true
      this.$refs.official.show()
    },
    handleSuccess (info) {
      if (info) {
        this.userInfo.portrait_url = info.portrait_url
        this.userInfo.nickname = info.nickname
      }

      this._getUserInfo().then(() => {
        this.userInfo = JSON.parse(localStorage.getItem('USER'))
      })
    },
    hanndleSaveQrcode () {
      this.showSaveImg = true
      this.initCreateDom()
    },
    offocialAccount () {
      this.show = false
      this.showOfficial = true
      this.$refs.official.show()
    },
    initQrcode () {
      const me = this
      this.qrcode = new QRCode(this.$refs.QrCode, {
        text: me.textUrl,
        width: 100,
        height: 100,
        colorDark: '#333333',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    initCreateDom () {
      window.pageYOffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0

      this.$nextTick(() => {
        html2canvas(document.querySelector('#qrcover'), {
          useCORS: true
          // allowTaint: true, // 允许跨域图片
          // backgroundColor: null
        }).then(canvas => {
          // canvas
          this.imgUrl = canvas.toDataURL('image/jpeg')
        })
      })
    },
    showAdClick () {
      this.showAd = false
      localStorage.setItem('showAd', JSON.stringify(false))
    },
    loginOut () {
      removeToken()
      localStorage.clear()
      this.$router.push('/login')
      setTimeout(() => {
        location.reload()
      }, 200)
    },
    handleBtnClick () {
      this.$refs.tip.hide()
    },
    onCopy (e) {
      this.$toast('复制成功')
      this.show = false
    },
    // 复制失败
    onError (e) {
      this.$toast('复制失败')
    },
    _getUserInfo () {
      return getUserInfo().then(res => {
        if (res.code === ERR_OK) {
          localStorage.setItem('USER', JSON.stringify(res.data.user))
          return Promise.resolve()
        }
      })
    },
    _getCodeText () {
      return getCodeText().then(res => {
        if (res.code === ERR_OK) {
          this.textUrl = res.data.url
          return Promise.resolve(res)
        }
      })
    }
  },
  beforeRouteEnter (to, from, next) {
    // ...
    next(vm => {
      if (getToken() && vm.$store.getters.userInfo) {
        // vm.$router.push({ path: '/login' })
      }
    })
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.my-tip {
  padding: 0.16rem 0.26rem !important;
  font-size: 0.18rem !important;
  line-height: 0.18rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  background: rgba(0, 4, 0, 0.8);
  border-radius: 0.1rem 0rem 0.1rem 0.1rem;
  white-space: nowrap;
  &.park,
  &.home {
    position: absolute;
    bottom: -0.5rem;
    left: 0rem;
    color: rgba(255, 255, 255, 1) !important;
  }
}
.showSaveImg {
  z-index: 99;
}
.van-overlay /deep/ .block {
  text-align: center;
  @include center();
  img {
    padding: 0.15rem;
    background: #fff;
    width: 2rem;
    height: 2rem;
  }
  .tip {
    color: #c3c8d2;
    font-size: 0.24rem;
    text-align: center;
  }
}
.officialOverlay {
  /deep/ .van-overlay {
    z-index: 3;
  }
  .code {
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    margin-top: 0.65rem;
  }
  p {
    font-size: 0.23rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(0, 4, 0, 1);
    line-height: 0.32rem;
    text-align: center;
    margin-top: 0.43rem;
  }
}
.tip {
  .txt {
    width: 100%;
    margin-top: 0.97rem;
    text-align: center;
    p {
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0, 4, 0, 1);
      line-height: 0.46rem;
    }
  }
  .btn {
    width: 100%;
    font-size: 0;
    margin-top: 0.6rem;
  }
}
.top {
  width: 100%;
  padding: 0 0.36rem;
  box-sizing: border-box;
  background: #fff;
  .top-inner {
    padding-bottom: 0.6rem;
  }
  .msg-qrcode {
    width: 100%;
    height: 1.31rem;
    font-size: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .qrcode {
      display: inline-block;
      width: 0.35rem;
      height: 0.35rem;
      background: url("../../assets/images/icon_ewm.png") no-repeat;
      background-size: cover;
      margin: 0.59rem;
    }
    .msg {
      display: inline-block;
      width: 0.39rem;
      height: 0.39rem;
      background: url("../../assets/images/iconx_xoapxo.png") no-repeat;
      background-size: cover;
      position: relative;
      .dot {
        position: absolute;
        top: -0.1rem;
        right: -0.1rem;
        width: 0.1rem;
        height: 0.1rem;
        background: rgba(245, 83, 70, 1);
        border-radius: 50%;
      }
    }
  }
  .info {
    display: flex;
    align-items: center;
    height: 1.22rem;
    .avater {
      width: 1.21rem;
      height: 1.22rem;
      border-radius: 50%;
      margin-right: 0.43rem;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid #eeee;
      img {
        width: 100%;
      }
    }
    .txt {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      .name {
        font-size: 0.36rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(0, 4, 0, 1);
        font-weight: bold;
      }
      .time {
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000;
        margin-top: 0.25rem;
      }
    }
    .login-txt {
      font-size: 0.3rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
    }
  }
  .opt {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 0.69rem;

    .integral,
    .coupon,
    .conversion {
      display: flex;
      flex-direction: column;
      align-items: center;
      i {
        display: inline-block;
        width: 0.5rem;
        height: 0.44rem;
        background: url("../../assets/images/icon_jf.png") no-repeat;
        background-size: cover;
      }
      span {
        display: inline-block;
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(35, 36, 40, 1);
        line-height: 0.22rem;
        margin-top: 0.21rem;
      }
    }
    .coupon {
      i {
        width: 0.5rem;
        height: 0.38rem;
        background: url("../../assets/images/icon_yhq.png") no-repeat;
        background-size: cover;
      }
    }
    .conversion {
      i {
        width: 0.45rem;
        height: 0.43rem;
        background: url("../../assets/images/icon_hd.png") no-repeat;
        background-size: cover;
      }
    }
  }
}
.designer-conversion {
  width: 100%;
  height: 1.23rem;
  img {
    width: 100%;
    background: #fff;
  }
}
.bottom {
  width: 100%;
  padding-left: 0.36rem;
  box-sizing: border-box;
  padding-top: 0.57rem;
  background: #fff;
  .item-park {
    width: 100%;
    line-height: 1.01rem;
    border-bottom: 2px solid rgba(0, 4, 0, 1);
    font-size: 0.3rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(4, 0, 0, 1);
    position: relative;
  }
  .inner {
    padding-right: 0.36rem;
    .item-nor {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 1.33rem;
      border-bottom: 1px solid #e6e7e8;
      position: relative;
      span {
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(4, 0, 0, 1);
      }
      i {
        display: inline-block;
        width: 0.14rem;
        height: 0.22rem;
        background: url("../../assets/images/icon__.png") no-repeat;
        background-size: cover;
      }
    }
  }
}
.advertising {
  width: 100%;
  overflow: hidden;
  position: fixed;
  left: 0;
  bottom: 1.22rem;
  span {
    position: absolute;
    right: 0rem;
    top: 0rem;
    padding: 0.2rem;
    font-size: 0;
    i {
      display: inline-block;
      width: 0.26rem;
      height: 0.26rem;
      background: url("../../assets/images/close.png") no-repeat;
      background-size: cover;
    }
  }
  img {
    width: 100%;
    vertical-align: bottom;
  }
}
.popup-inner {
  width: 100%;
  padding: 0.64rem 1.12rem 0.88rem 1.12rem;
  box-sizing: border-box;
  .ttile {
    font-size: 0.36rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(0, 4, 0, 1);
    line-height: 1rem;
    text-align: center;
  }
  .copy,
  .tel,
  .official-account {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    border-bottom: 1px solid #dadada;
    padding: 0.43rem 0;
    font-size: 0;

    input,
    p {
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 400;
      border: none;
      outline: none;
      flex: 1;
      &::placeholder {
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }
    p {
      color: rgba(153, 153, 153, 1);
      span {
        color: rgba(153, 153, 153, 1);
      }
    }
    span {
      font-size: 0.22rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0, 4, 0, 1);
      a {
        color: rgba(35, 36, 40, 1);
      }
    }
  }
  .cancel {
    margin-top: 0.66rem;
  }
}
@include slideEnter();
</style>
